<template>
	<div>
		<div>
			<Graphic :data="data" />
		</div>
		<div v-for="(item, index) in data" :key="item">
			<label for="">{{item.label}}</label>
			<input type="range" min="0" max="100" v-model="item.value" @change="onchange">
			<span>{{item.value}}</span>
			<button type="button" @click="remove(index)">X</button>
		</div>
		<div>
			<input type="text" v-model="newLabel">
			<button type="button" @click="add">add</button>
		</div>
		<pre>{{data}}</pre>
	</div>
</template>
<script setup>
	import Graphic from './graphic.vue'
	import {ref, reactive} from 'vue'
	const data = reactive([
		{ label: 'A', value: 100 },
		{ label: 'B', value: 100 },
		{ label: 'C', value: 100 },
		{ label: 'D', value: 100 },
		{ label: 'E', value: 100 },
		{ label: 'F', value: 100 }
	])
	const newLabel = ref('')
	const add = () => {
		if(!newLabel.value) return
		data.push({label: newLabel.value, value: 100})
		newLabel.value = ''
	}
	
	const remove = (index) => {
		data.splice(index, 1)
	}
	
	const onchange = (e) => {
		console.log(data)
	}
	
</script>